import React from 'react';
import {PermissionsAndroid, Image} from 'react-native';
import {MapView, MapType, Marker} from 'react-native-amap3d';
import {Box, Button, Text, Modal, Avatar,useToast} from 'native-base';
const requestLocationPermission = async () => {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
      {
        title: '申请定位功能',
        message: '快速定位附近的球友',
        buttonNeutral: '稍后询问',
        buttonNegative: '取消',
        buttonPositive: '确定',
      },
    );
  } catch (err) {
    console.warn(err);
  }
};
import Geolocation from '@react-native-community/geolocation';
import LinearGradinet from 'react-native-linear-gradient';
import Diamond from '../public/icons/diamond';

const Home = props => {
  //data
  const [showModal, setShowModal] = React.useState(false);
  const [selectedUser, setSelectedUser] = React.useState({
    id: 1,
    info: {
      name: '张三',
      avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      pingpongAge: 2,
      level: 2,
    },
    position: {latitude: 37.193671, longitude: 104.071486},
  });
  const [showUserInfo, setShowUserInfo] = React.useState(false);
  const users = [
    {
      id: 1,
      info: {
        name: '张海生',
        avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
        pingpongAge: 1.5,
        level: 12,
      },
      position: {latitude: 37.193671, longitude: 104.071486},
    },
  ];
  const toast=useToast();
  //methods
  requestLocationPermission(); //获取定位权限
  Geolocation.getCurrentPosition(info => {
    global.mapRef.moveCamera(
      {
        target: {
          longitude: info.coords.longitude,
          latitude: info.coords.latitude,
        },
        zoom: 20,
      },
      100,
    );
  }); //首次定位
  setInterval(() => {
    Geolocation.getCurrentPosition(info => {
      //fetch
    });
  }, 10000); //持续获取定位
  const navigateTo = routeName => {
    const navigation = props.route.params.navigateTo;
    navigation(routeName);
  };
  //render
  return (
    <Box
      style={{
        backgroundColor: '#f3f3f3',
        flex: 1,
        paddingLeft: 10,
        paddingRight: 10,
      }}>
      <Box style={{height: 190, marginTop: 10, borderRadius: 20}}>
        <Image
          source={require('../public/img/4147689311_770461788.jpg')}
          style={{
            width: '100%',
            height: '100%',
            position: 'absolute',
            borderRadius: 20,
          }}
          resizeMethod="scale"></Image>
        <Box>
          <Text fontSize={20} style={{marginTop: 10, marginLeft: 10}}>
            早上好，新用户
          </Text>
          <Box
            style={{
              width: '80%',
              height: 90,
              marginTop: 30,
              marginLeft: '10%',
              backgroundColor: '#FAFFE1',
              borderRadius: 10,
            }}>
            <LinearGradinet
              colors={['#fca5a5', '#fee2e2', '#fef2f2']}
              flex={1}
              start={{x: 0, y: 0}}
              end={{x: 1, y: 0}}
              locations={[0, 0.3, 1]}
              style={{borderRadius: 10}}>
              <Box style={{position: 'absolute', paddingLeft: 10, top: 15}}>
                <Text fontSize={18}>乒乒乓乓</Text>
                <Text fontSize={18}>中国的力量</Text>
              </Box>
              {/* <Image source={require('../public/img/2ccsib9g.jpg')} style={{height:'100%',width:'100%',right:0}} resizeMethod="scale"></Image> */}
            </LinearGradinet>
          </Box>
        </Box>
      </Box>

      <Box
        style={{
          marginTop: 10,
          borderRadius: 20,
          padding: 20,
          backgroundColor: '#fff',
          flex: 1,
        }}>
        <MapView
          ref={ref => (global.mapRef = ref)}
          initialCameraPosition={{
            // 设置初始相机位置
            target: {
              latitude: 39.90469,
              longitude: 116.40742,
            },
            zoom: 10,
          }}
          zoomControlsEnabled={false}
          mapType={MapType.Navi}
          style={{flex: 1, borderRadius: 20}}>
          {users.map(item => {
            return (
              <Marker
                key={item.id}
                position={item.position}
                icon={{uri: item.info.avatar, width: 30, height: 30}}
                onPress={() => {
                  setSelectedUser(item.info);
                  setShowUserInfo(true);
                }}
              />
            );
          })}
        </MapView>
        <Button
          style={{
            position: 'absolute',
            width: 80,
            height: 80,
            borderRadius: 40,
            top: 320,
            left: '43%',
          }}
          onPress={() => {
            setShowModal(true);
          }}
          colorScheme="red">
          开始
        </Button>
      </Box>
      <Modal
        isOpen={showModal}
        onClose={() => {
          setShowModal(false);
        }}>
        <Modal.Content style={{width:200}}>
          <Modal.Body>
            <Button
              style={{margin: 20}}
              colorScheme="red"
              onPress={() => {
                setShowModal(false), navigateTo('Record');
              }}>
              自由练习
            </Button>
            <Button
              style={{margin: 20}}
              colorScheme="red"
              onPress={() => {
                setShowModal(false), navigateTo('TrainSelector');
              }}>
              指定动作
            </Button>
          </Modal.Body>
        </Modal.Content>
      </Modal>
      <Modal
        isOpen={showUserInfo}
        onClose={() => {
          setShowUserInfo(false);
        }}>
        <Modal.Content style={{width:200}}>
          <Modal.Body>
            <Box style={{display:'flex',flexDirection:'row',justifyContent:'flex-start',alignItems:'center',marginBottom:20,marginTop:10}}>
              <Avatar source={{uri: selectedUser.avatar}} style={{marginRight:10}}></Avatar>
              <Box>
                <Box style={{display:'flex',flexDirection:'row',justifyContent:'flex-start',alignItems:'center'}}>
                  <Diamond level={selectedUser.level}></Diamond>
                  <Text style={{marginLeft:5}} fontSize={20}>{selectedUser.name}</Text>
                </Box>
                <Text>球龄：{selectedUser.pingpongAge}年</Text>
              </Box>
            </Box>
            <Button
            colorScheme='red'
              onPress={() => {
                setShowUserInfo(false),
                toast.show({
                  description: '已发送请求',
                })
              }}>
              切磋
            </Button>
          </Modal.Body>
        </Modal.Content>
      </Modal>
    </Box>
  );
};
export default Home;
